<template>
	<div>
		<div style="margin-top: 3.2rem;"></div>
		<top-nav bgColor="white" title="课堂日志"   :rightShow="true" returnPath="上一级"></top-nav>
		<classInfo  @fatherDo="initCourse" ></classInfo>
		  <mu-list>
		  	<section class="diary-title">
    				<span class="diary-title-left">课堂日志</span>
    				<span class="diary_state" :class="FnDiaSta()">{{subState}}</span>
    		</section>
    		
    		<mu-list-item @click="isTeachType=true" >
        		<mu-icon slot="left" value="class"  color="blue"/>
        		<span style="font-size: 1rem;">授课类型：{{teachTypeSub}}</span>
        		<mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      		</mu-list-item>
      		
      	<mu-list-item title="" >
      			<mu-icon slot="left" value="alarm"  color="blue"/>
      			<span  style="font-size: 1rem;">到达时间:{{DDSJ}}</span>
      	 		<yd-datetime type="time" v-model="DDSJ">
         		</yd-datetime>
        	<mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      	</mu-list-item> 
      	
      	<mu-list-item title="" >
      	<mu-icon slot="left" value="alarm"  color="blue"/>
      	<span  style="font-size: 1rem;">离开时间:{{LKSJ}}</span>
      	 <yd-datetime type="time" v-model="LKSJ">
         </yd-datetime>
        <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      </mu-list-item> 
      	
      	<mu-list-item title="" @click="openTimePop()">
         <mu-icon slot="left" value="alarm"  color="blue"/>
         <!--<span style="font-size: 1rem;">讲授时长:{{address[0]}}</span>-->
         <span style="font-size: 1rem;">讲授时长:{{timeLength}}分钟</span>
         <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
      </mu-list-item> 
      
	<mu-divider />
      <mu-list-item @click="handleToggle('SFTG')" title="正常出勤">
        <mu-switch v-model="SFTG"  slot="right"/>
        <mu-icon slot="left" value="alarm_on"  color="green500"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item @click="handleToggle('ZYBZ')" title="布置作业">
        <mu-icon slot="left" value="note_add"  color="green500"/>
        <mu-switch v-model="ZYBZ"  slot="right"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item @click="handleToggle('SFKQ')" title="已考勤">
        <mu-icon slot="left" value="assignment_turned_in"  color="green500"/>
        <mu-switch v-model="SFKQ"  slot="right"/>
      </mu-list-item>
      <mu-list-item @click="handleToggle('isMatch')" title="是否相符">
        <mu-icon slot="left" value="assignment_turned_in"  color="green500"/>
        <mu-switch v-model="isMatch"  slot="right"/>
      </mu-list-item>
      
        <mu-list-item @click="openEdit" title="授课内容">
        <mu-icon slot="left" value="turned_in"  color="blue"/>
        <mu-icon slot="right" value="keyboard_arrow_right" color="blue" />
        <!--<span slot="right" style="color: blue;">编辑</span>-->
      </mu-list-item>
      <section>
      	<p style="width: 90%;margin:0 5%;padding: 0.5rem;font-size: 0.8rem;">
      		{{EditContent}}
      	</p>
      </section>
    		
		  </mu-list>
		  
	<mu-dialog  :open="isTeachType" @close="isTeachType=false"  scrollable>
         <mu-list>
          <section  style="display: flex;justify-content: center;font-size: 1rem;color: #000; position: relative; top: -0.7rem;">授课类型</section>
          <mu-list-item disableRipple title="A、理论课">
            <mu-radio slot="right" name="group" nativeValue="理论课" v-model="teachTypeSub"  class="demo-radio"/>
          </mu-list-item>
          <mu-list-item disableRipple title="B、理论和实践课">
            <mu-radio slot="right" name="group" nativeValue="理论和实践课" v-model="teachTypeSub"  class="demo-radio"/>
          </mu-list-item>
          <mu-list-item disableRipple title="C、实践课">
            <mu-radio slot="right" name="group" nativeValue="实践课" v-model="teachTypeSub"  class="demo-radio"/>
          </mu-list-item>
        </mu-list>
          <mu-raised-button label="确定" primary fullWidth @click="getTeachType()"/>
     </mu-dialog>
		    
	 <yd-popup v-model="bottomPopup" position="bottom" :close-on-masker="false">
    		<div class="demo-picker-container" >
	        	<section class="slider-time" >
	        		<a @click="closeTimePop(beforeVal)">取消</a>
	        		<a style="color: #2397f2" @click="closeTimeSure()">确定</a>
	        	</section>
				<mt-picker v-if="bottomPopup" :slots="slots" :visibleItemCount="7" @change="onValuesChange"></mt-picker>
			</div>
    </yd-popup>	
		
	  <mu-dialog :open="isEditTeach" title="编辑授课内容" @close="closeEditTeach">
		    	<section style="position: relative; height: 8.4rem;background-color: #fff;">
						<textarea class="remove-texStyle" placeholder="请输入授课内容(不少于10个字)" v-model="EditContent"></textarea>
						<aside class="Edit-count" >
							<span>{{EditContent.length}}</span>
							<span style="color: #b7b7b7;">/300</span>
						</aside>
					</section>
			    <mu-flat-button slot="actions" @click="closeEditTeach('cancel')" primary label="取消"/>
			    <mu-flat-button slot="actions" primary @click="closeEditTeach('sure')" label="确定"/>
		  </mu-dialog>	
		
	</div>
</template>

<script>
export default {
  			data () {
    			return {
					subState:'',//0未提交，1已提交。2已修改
					teachTypeChoice:0,//0未提交，1已提交。2已修改
					teachTypeSub:'',//0未提交，1已提交。2已修改
					isTeachType:false,
					DDSJ:'', //到达时间
      				LKSJ:'', //离开时间
      				JSSJ:0, //讲授时间
      				ZYBZ:true, //作业布置
      				SFKQ:true,  //是否考勤
      				SFTG:true, //是否脱岗
      				timeLength:100,//讲授时长
      				isMatch:true,//是否相符
      				bottomPopup: false,
      				courseTime:[],//每节课上课时间
      				EditContent:'',//授课内容
      				disable:true,
      				enable:false,
      				isEditTeach:false,
      				slots: [
		    			{
		      			flex: 1,
		      			values: [],
		      			className: 'slot1',
		      			textAlign: 'center',
		      			defaultIndex:0,
		    			}, 
		  			],
		  			addressSlots: [
        			{
          				width: '100%',
          				textAlign: 'center',
						values:[]
        			}
        			],
      				address:[],
					beforeVal:[],
					timeOption:{},
					}
    		},
			methods:{
			closeEditTeach(val){
				if(val=='cancel')
				this.EditContent=''
  		 		this.isEditTeach=false
  			},
			openEdit(){
  		 		this.isEditTeach=true
  			},
			closeTimeSure(){
				this.timeLength=this.beforeVal[0].match(/(\S*)分钟/)[1];
    			this.bottomPopup=false
   			 },
			closeTimePop(){
					
    				this.bottomPopup=false
    		},
				    //获取每节课的配置参数
    		getCourTimeInfo(val){
					let that=this
					for(var i=0;i<121;i++){//设置插件的长度
						that.addressSlots[0].values.push((i)+'分钟')
						that.slots[0].values.push((i)+'分钟')
						}
					that.axios.get(that.CourTimeInfoUrl).then(function(response){
						that.courseTime=response.data
						that.setCourseItem(val)
					}).catch(function(error){
						console.info(error)
					})
				},
				setCourseItem(val){
					var j = parseInt(val.courseWhichIndex);
					//设置到达时间
					this.DDSJ=this.courseTime[j-1].start
					//设置离开时间
					this.LKSJ=this.courseTime[j].end
					this.timeLength=parseInt(this.courseTime[j-1].length)+parseInt(this.courseTime[j].length)
					console.info(val)
					
				},
				onValuesChange(picker, values) {
					this.beforeVal=values
			
			
    			},
				openTimePop (position) {
      				this.bottomPopup= true
    			},
    			handleToggle (key) {
        			this[key] = !this[key]

    		},
				getTeachType(){
  					if(this.teachTypeSub=='理论课'){
  						this.teachTypeChoice=0
  					}else if(this.teachTypeSub=='理论和实践课'){
  						this.teachTypeChoice=1
  					}else if(this.teachTypeSub=='实践课'){
  						this.teachTypeChoice=2
  					}
//		console.info(this.teachTypeChoice)
  		this.isTeachType=false
  				},
				initCourse(val){
					console.log('父组件')
					console.log(val)
					this.getCourTimeInfo(val)
					this.FnDiaSta(val.courseDiaryState)
				},
				FnDiaSta(diaryState){
  					if(diaryState==0){
  			 		this.subState='未提交'
  			 		return 'diary_unsubmit' 
  					}else if(diaryState==1){
  			 		this.subState='已提交'
  			 		return 'diary_submit'
  					}else if(diaryState==2){
  			 		this.subState='已修改'
  			 		this.isEditSec=false
  			 		return 'diary_edit'
  				}
  				},
			},
			computed:{
			todayCourse(){
				return this.$store.state.todayCourse
			},
			thisCourse(){
				
			},
			CourTimeInfoUrl(){
					return `${localStorage.schoolUrl}/schedule/SelectAll`
			},
		},
		  mounted(){
		  	this.initCourse(this.$store.state.thisCourse)
		  }
}
	
</script>

<style>
.diary-title{
 	height: 3rem;
 	display: flex;
 	align-items: center; 
 	background-color: #f5f5f5;
 	justify-content: space-between;
}
.diary-title-left{
	margin-left: 5%;
	color: #8a8a8a;
	font-size: 0.9rem;
}
.diary_state{
	padding: 2px 4px;
	float: right;
	margin-right: 8%;
	border-radius: 3px;
	color: #fff;
	display: block;
	font-size: 12px;
}
.diary_unsubmit{
	background-color: #f83535;
}
.diary_submit{
	background-color: rgb(60, 159, 236);
}
.diary_edit{
	background-color: rgb(76, 231, 98);
}
.Edit-count{
	position: absolute;
	right: 1rem; 
	bottom: 0.2rem;
	font-size: 0.8rem;
}
.defaultLine{
		border-bottom: 1px solid rgba(0,0,0,.12)!important;	
}
.temp-mask{
	 z-index: 1501;
	 background-color:rgba(0,0,0,0);
	 position: fixed;
	 width: 100%;
	 height: 100%;
	 left: 0;
	 top: 0;
}
.picker-slot-wrapper{
	transition-duration:1s!important;
	transition-timing-function:cubic-bezier(0.2,0.1,0.35,1)!important!important
}
.yd-popup-show{
		height: auto!important;
}
.slot1{
	font-size: 1rem;
}
.mu-picker-item{
	font-size: 1rem!important;
}
.slider-time{
		display: flex; 
		height: 2.6rem; 
		border-bottom: 1px solid #f2f2f2;
		-webkit-box-pack: justify;
		justify-content: space-between;
		position: relative;
}
.slider-time a{
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	padding: 0 30px;
}
.demo-popup-bottom{
	width: 100%;
}
 .mu-content-block{
 		padding: 0!important;
 }
	.demo-picker-container{
		width: 100%;
		/*position: absolute;*/
		z-index: 320;
		/*left: 0;*/
		/*bottom: 0;*/
		background-color: white;
	}
  .mu-sub-header{
    font-size:20px;
    background-color:whitesmoke;
  }
  .topSelectBtn{
    background-color: blue;
    color:white;
  }
  .mu-list-item-zzg{
    padding:20px;
  }
  .yd-datetime-input{
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 250;
  	color:rgba(0,0,0,0);
  }
  .yd-datetime-head{
  	background-color: #fff;
  }
  .yd-datetime-head>a:last-child{
		color: #2397f2!important;
	}
.mt8 {
  margin-top: 8px;
  margin-bottom: 1.5rem;
}
.flex-demo {
  text-align: center;
}
.flex-title{
  text-size:18px;
  background-color: #eee;
  padding:10px;
}
.flex-body{
  padding: 10px;
  background-color: #fff;
}
.bottom-btnbar{
    position: fixed !important;
    right: 0;
    bottom: 0;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    background-color: white;
    border-top:1px solid #eee;
    z-index: 280;
  }
  .active{
  	background-color:rgba(255,255,255,0)!important;
  	color:#ff4081!important;
  }
</style>